<template>
  <div class="box">
    <div class="zhjd-datetime-range" v-if="showTime">
      <el-date-picker
        v-model="startTime"
        type="datetime"
        value-format="yyyy-MM-dd HH:mm:ss"
        format="yyyy-MM-dd HH:mm:ss"
        placeholder="开始时间"
        :picker-options="startPickerOptions"
        @change="timeChange"
      >
      </el-date-picker>
      ~
      <el-date-picker
        v-model="endTime"
        type="datetime"
        value-format="yyyy-MM-dd HH:mm:ss"
        format="yyyy-MM-dd HH:mm:ss"
        placeholder="结束时间"
        :picker-options="endPickerOptions"
        @change="timeChange"
      >
      </el-date-picker>
    </div>
    <div class="zhjd-date-range" v-else>
      <el-date-picker
        style="width: 125px"
        v-model="startTime"
        size="mini"
        type="date"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        placeholder="开始时间"
        :picker-options="startPickerOptions"
        @change="timeChange"
      >
      </el-date-picker>
      ~
      <el-date-picker
        style="width: 125px"
        v-model="endTime"
        size="mini"
        type="date"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        placeholder="结束时间"
        :picker-options="endPickerOptions"
        @change="timeChange"
      >
      </el-date-picker>
    </div>
  </div>
</template>
<script>
export default {
  name: "zhjd-date-range",
  props: {
    value: {
      type: Array,
      default: () => [],
    },
    showTime: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      startTime: null,
      endTime: null,
      startPickerOptions: {},
      endPickerOptions: {},
    };
  },
  mounted() {
    // 设置开始时间必须在结束时间之前
    this.startPickerOptions.disabledDate = (time) => {
      if (!!this.endTime) {
        let nowTime = time.getTime();
        let maxTime = this.coverToTime(this.endTime);
        return nowTime > maxTime;
      }
      return false;
    };

    // 设置结束时间可选范围必须在开始时间之后
    this.endPickerOptions.disabledDate = (time) => {
      if (!!this.startTime) {
        let minTime = this.coverToTime(this.startTime);
        let nowTime = time.getTime();
        return nowTime < minTime;
      }
      return false;
    };
  },
  methods: {
    /**
     * 时间变化处理
     */
    timeChange() {
      // 判断两个数值是否合法
      if (!!this.startTime && this.endTime) {
        let start = this.coverToTime(this.startTime);
        let end = this.coverToTime(this.endTime);
        if (start > end) {
          let temp = this.startTime;
          this.startTime = this.endTime;
          this.startTime = temp;
        }
      }

      // 向父页面传值
      this.$emit("input", [this.startTime, this.endTime]);
    },

    /**
     * 时间字符串转时间戳
     */
    coverToTime(time) {
      return this.showTime
        ? new Date(time).getTime()
        : new Date(time + " 00:00:00").getTime();
    },
  },
};
</script>

<style scoped>
.box {
  display: inline-block;
  vertical-align: top;
}
.zhjd-date-range {
  /* min-width: 300px; */
}
.zhjd-date-range .el-date-editor {
  /* width: 130px; */
}
.zhjd-datetime-range {
  /* min-width: 400px; */
}
.zhjd-datetime-range .el-date-editor {
  /* width: 190px; */
}
</style>
